<template>
	<el-main>
		<el-row>
			<el-col>
				<div class="tips-default-box" v-html="tipsTitle"></div>
				<div style="margin-top: 24px;">
					<quill-editor
						v-model="content" 
						ref="myQuillEditor" 
						:options="editorOption" 
						@change="onEditorChange($event)">
					</quill-editor>
				</div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { quillEditor } from "vue-quill-editor";
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				tipsTitle: '这里仅提供我比较常用的配置选项，如需了解更多使用方法请参考<a href="https://gitee.com/jeffka/vue-quill-editor" target="_blank">官方文档</a>',
				content: '<p>欢迎使用Vue Element Simple！</p>',
				editorOption: {
					placeholder: "请在这里输入正文内容",
					modules:{
						toolbar:[
							['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
							['blockquote', 'code-block'], //引用，代码块
							[{ 'header': 1 }, { 'header': 2 }], //标题，键值对的形式；1、2表示字体大小
							[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
							[{ 'align': [] }], //对齐方式
							['clean'], //清除字体样式
							['image'] //上传图片
						]
					}
				}
			}
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill;
			}
		},
		methods: {
			// 内容改变事件
			onEditorChange({ quill, html, text }) {
				console.log(quill, html, text);
				this.content = html;
			}
		}
	}
</script>

<style>
	.ql-editor {
		min-height: 250px;
	}
</style>
